<template>
  <div class="app-container">
    <el-button type="primary"
       size="medium"
       icon="el-icon-copy-document"
       style="margin-bottom: 20px"
    >新建类型</el-button>
    <el-table
      :data="finalist"
      border
      size="small"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="id"
        label="类型ID"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        align="center"
        label="类型名称"
        show-overflow-tooltip
      />
      <el-table-column label="操作"  align="center" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="deleteEdit(scope.$index, scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handlemodify(scope.$index, scope.row)"
          >修改名称</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="wacthpreview(scope.$index, scope.row)"
          >查看广告图</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog title="修改名称" :visible.sync="dialogFormname" class="dialogform">
        <el-form :model="Modifyname">
          <el-form-item >
            <label-wrap  class="dialog-item">名称</label-wrap>
            <el-input v-model="Modifyname.name" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormname = false">取 消</el-button>
          <el-button type="primary" @click="dialogname">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import request from "@/utils/request";
import {mapActions, mapState} from "vuex";

export default {
  name: 'AdvertisingChart',
  data() {
    return {
      Modifyname: {
        name: ''
      },
      dialogFormname: false
    }
  },
  created() {
   this.getfend()
  },
  computed: {
    ...mapState(['finalist']),
  },
  methods: {
    ...mapActions(['getfend']),
    //删除
    deleteEdit(index, data) {
      console.log(index, data)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/delete', data.id).then((resp) => {
          if (resp) {
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        })
      })
    },
    //修改名称
    handlemodify(index, data) {
      this.Modifyname.name = data.name
      this.dialogFormname = true
    },
    dialogname(name) {
      name = this.Modifyname.name
      //console.log(name)
      request.put('/update', name).then((resp) => {
        if (resp) {
          this.$message.success('修改成功')
          this.Modifyname.name = ''
          this.dialogFormname = false
        }
      })
    },
    //查看广告图
    wacthpreview(index, data){
      let routeUrl = this.$router.resolve({
        path: data.url,
        //path:'https://element.eleme.cn/2.10/#/zh-CN/component/table',
      });
      window.open(routeUrl.href, '_blank');
    }
  }
}

</script>

<style>
.dialog-input{
  width: 80%;
}
.dialogform{
  width: 60%;
  margin: 0 auto;
}
.dialog-item{
  width: 18%;
}
</style>
